<template>
  <div>
    <el-descriptions title="基础信息" :column="3" border size="mini">
      <el-descriptions-item label="分区名称" :labelStyle="customLabelStyle">
        {{ this.editingZoneObj ? this.editingZoneObj.name : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="分区类型" :labelStyle="customLabelStyle">
        {{ this.editingZoneObj ? this.editingZoneObj.levelTypeName : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="分区描述" :labelStyle="customLabelStyle">
        {{ this.editingZoneObj ? this.editingZoneObj.details : '' }}
      </el-descriptions-item>

      <template slot="extra">
        <el-button type="primary" size="mini" @click="handleBasicDfqEdit">编辑</el-button>
      </template>
    </el-descriptions>

    <el-descriptions title="总入水口" border size="mini" :column="3" style="margin-top: 10px;">
      <el-descriptions-item label="数量" :labelStyle="customLabelStyle">
        {{ getBasicDfqValue('rskAmount') }}
      </el-descriptions-item>
      <el-descriptions-item label="管网材质" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('rskMaking')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="管径" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('rskSize')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="居民家庭用户" border size="mini" :column="3" style="margin-top: 10px;">
      <el-descriptions-item label="居民小区总数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('homeuserAreaamount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="居民总户数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('homeuserAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="居民总表数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('homeuserXbAmount')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="公共服务用水" border size="mini" :column="2" style="margin-top: 10px;">
      <el-descriptions-item label="总户数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('publicAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="总表数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('publicXbAmount')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="生产运营用水" border size="mini" :column="2" style="margin-top: 10px;">
      <el-descriptions-item label="总户数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('businessAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="总表数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('businessXbAmount')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="消防及其他特殊用水" border size="mini" :column="2" style="margin-top: 10px;">
      <el-descriptions-item label="总户数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firewaterAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="总表数" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firewaterXbAmount')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="管网上水池情况" border size="mini" :column="2" style="margin-top: 10px;">
      <el-descriptions-item label="水池数量" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('poolAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="水池总容量" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('poolCapacity')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="免费用水户数" border size="mini" style="margin-top: 10px;">
      <el-descriptions-item label="自来水公司内部" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('freeUser')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="其他" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('freeUserElse')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="供水管道" border size="mini" :column="3" style="margin-top: 10px;">
      <el-descriptions-item label="管网总长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('pipeLength')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="管材质及长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('pipeMaking')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="平均管龄" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('pipeLife')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="中水管道" border size="mini" :column="3" style="margin-top: 10px;">
      <el-descriptions-item label="管网总长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('midPipeLength')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="管材质及长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('midPipeMaking')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="平均管龄" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('midPipeLife')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="消防用水管道" border size="mini" style="margin-top: 10px;">
      <el-descriptions-item label="管网总长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firePipeLength')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="管材质及长度" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firePipeMaking')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="平均管龄" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firePipeLife')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="消火栓数量" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firePipeAmount')
        }}
      </el-descriptions-item>
      <el-descriptions-item label="总阀状态" :labelStyle="customLabelStyle">
        {{
          getBasicDfqValue('firePipeValvestate')
        }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改大分区配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" :close-on-click-modal="false"
               append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="240px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="总入水口-数量" prop="rskAmount">
              <el-input v-model="form.rskAmount" placeholder="请输入总入水口-数量" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总入水口-管网材质" prop="rskMaking">
              <el-input v-model="form.rskMaking" placeholder="请输入总入水口-管网材质"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总入水口-管径" prop="rskSize">
              <el-input v-model="form.rskSize" placeholder="请输入总入水口-管径"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="居民家庭用户-区域内居民小区总数" prop="homeuserAreaamount">
              <el-input v-model="form.homeuserAreaamount" placeholder="请输入居民家庭用户-区域内居民小区总数"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="居民家庭用户-区域内居民总户数" prop="homeuserAmount">
              <el-input v-model="form.homeuserAmount" placeholder="请输入居民家庭用户-区域内居民总户数"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="居民家庭用户-区域内居民总表数" prop="homeuserXbAmount">
              <el-input v-model="form.homeuserXbAmount" placeholder="请输入居民家庭用户-区域内居民总表数"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="公共服务用水-总户数" prop="publicAmount">
              <el-input v-model="form.publicAmount" placeholder="请输入公共服务用水-总户数"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公共服务用水-总表数" prop="publicXbAmount">
              <el-input v-model="form.publicXbAmount" placeholder="请输入公共服务用水-总表数"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="生产运营用水-总户数" prop="businessAmount">
              <el-input v-model="form.businessAmount" placeholder="请输入生产运营用水-总户数"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产运营用水-总表数" prop="businessXbAmount">
              <el-input v-model="form.businessXbAmount" placeholder="请输入生产运营用水-总表数"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="消防及其他特殊用水-总户数" prop="firewaterAmount">
              <el-input v-model="form.firewaterAmount"
                        placeholder="请输入消防及其他特殊用水-总户数"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消防及其他特殊用水-总表数" prop="firewaterXbAmount">
              <el-input v-model="form.firewaterXbAmount"
                        placeholder="请输入消防及其他特殊用水-总表数"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="管网上水池情况-水池数量" prop="poolAmount">
              <el-input v-model="form.poolAmount" placeholder="请输入管网上水池情况-水池数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管网上水池情况-水池总容量" prop="poolCapacity">
              <el-input v-model="form.poolCapacity" placeholder="请输入管网上水池情况-水池总容量"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="免费用水户数-自来水公司内部" prop="freeUser">
              <el-input v-model="form.freeUser" placeholder="请输入免费用水户数-自来水公司内部"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="免费用水户数-其他" prop="freeUserElse">
              <el-input v-model="form.freeUserElse" placeholder="请输入免费用水户数-其他"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="供水管道-管网总长度" prop="pipeLength">
              <el-input v-model="form.pipeLength" placeholder="请输入供水管道-管网总长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供水管道-管材质及长度" prop="pipeMaking">
              <el-input v-model="form.pipeMaking" placeholder="请输入供水管道-管材质及长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供水管道-平均管龄" prop="pipeLife">
              <el-input v-model="form.pipeLife" placeholder="请输入供水管道-平均管龄"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="中水管道-管网总长度" prop="midPipeLength">
              <el-input v-model="form.midPipeLength" placeholder="请输入中水管道-管网总长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中水管道-管材质及长度" prop="midPipeMaking">
              <el-input v-model="form.midPipeMaking" placeholder="请输入中水管道-管材质及长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中水管道-平均管龄" prop="midPipeLife">
              <el-input v-model="form.midPipeLife" placeholder="请输入中水管道-平均管龄"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="消防用水管道-管网总长度" prop="firePipeLength">
              <el-input v-model="form.firePipeLength" placeholder="请输入消防用水管道-管网总长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消防用水管道-管材质及长度" prop="firePipeMaking">
              <el-input v-model="form.firePipeMaking" placeholder="请输入消防用水管道-管材质及长度"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消防用水管道-平均管龄" prop="firePipeLife">
              <el-input v-model="form.firePipeLife" placeholder="请输入消防用水管道-平均管龄"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="消防用水管道-消火栓数量" prop="firePipeAmount">
              <el-input v-model="form.firePipeAmount" placeholder="请输入消防用水管道-消火栓数量"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消防用水管道-总阀状态" prop="firePipeValvestate">
              <el-input v-model="form.firePipeValvestate" placeholder="请输入消防用水管道-总阀状态"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {updateBasicDfq, getBasicDfqByAreaId} from "@/api/leakage/basicDfq";

export default {
  name: "BasicDfqInfo",
  data() {
    return {
      editingZoneObj: undefined,
      editingBasicDfqObj: undefined,
      // 是否显示弹出层
      open: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      customLabelStyle: {width: '17%', textAlign: 'right'},
    }
  },
  methods: {
    updateEditingZone(zone) {
      this.editingZoneObj = zone
      this.loadBasicDfqData()
    },
    loadBasicDfqData() {
      getBasicDfqByAreaId({'areaId': this.editingZoneObj.areaId}).then(res => {
        this.editingBasicDfqObj = res.data
        this.form = Object.assign({}, res.data)
        this.$forceUpdate()
      })
    },
    handleBasicDfqEdit() {
      if (this.editingZoneObj == undefined) {
        this.$message.error('请先在左侧区域树选择大分区')
      } else {
        this.title = `编辑【${this.editingZoneObj.areaName}】基础信息`
        this.open = true
      }
    },
    getBasicDfqValue(key) {
      return this.editingBasicDfqObj != undefined ? this.editingBasicDfqObj[key] : ''
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        tenantId: null,
        ChangeTime: null,
        AreaID: null,
        rskAmount: null,
        rskMaking: null,
        rskSize: null,
        homeuserAreaamount: null,
        homeuserAmount: null,
        homeuserXbAmount: null,
        publicAmount: null,
        publicXbAmount: null,
        businessAmount: null,
        businessXbAmount: null,
        firewaterAmount: null,
        firewaterXbAmount: null,
        poolAmount: null,
        poolCapacity: null,
        freeUser: null,
        freeUserElse: null,
        pipeLength: null,
        pipeMaking: null,
        pipeLife: null,
        midPipeLength: null,
        midPipeMaking: null,
        midPipeLife: null,
        firePipeLength: null,
        firePipeMaking: null,
        firePipeLife: null,
        firePipeAmount: null,
        firePipeValvestate: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateBasicDfq(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.loadBasicDfqData();
            });
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form--label-top .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0 !important;
}
</style>
